<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="author" content="xiaojiangK" />
		<meta name="email" content="740092856@qq.com" />
		<meta name="gitee" content="https://gitee.com/xiaojiangk/" />
		<meta name="viewport" content="width=1200, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="images/css/admin.min.css" />
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<title>求新商户后台</title>
		<style>
			html,
			body {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				background: url('images/login-bg.png') center center no-repeat;
				background-image: -webkit-linear-gradient(#ff9415, #ff7200);
				background-image: -ms-linear-gradient(#ff9415, #ff7200);
				background-image: linear-gradient(#ff9415, #ff7200);
				background-size: 100% 100%;
			}
			ul,
			li {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.login {
				left: 50%;
				top: 50%;
				width: 620px;
				padding: 0 79px;
				position: fixed;
				background: #fff;
				border-radius: 12px;
				margin-top: -302px;
				margin-left: -310px;
				-webkit-box-shadow: 0px 0px 12px 1px rgba(255, 153, 0, 0.59);
				-moz-box-shadow: 0px 0px 12px 1px rgba(255, 153, 0, 0.59);
				-ms-box-shadow: 0px 0px 12px 1px rgba(255, 153, 0, 0.59);
				box-shadow: 0px 0px 12px 1px rgba(255, 153, 0, 0.59);
			}
			.login .title {
				color: #333;
				font-size: 30px;
				text-align: center;
				margin: 70px 0 90px;
			}
			.login .form li {
				margin: 0 0 56px;
				position: relative;
			}
			.login .form li.submit {
				margin: 0 0 30px;
			}
			.login .form li input {
				width: 100%;
				height: 38px;
				border: none;
				color: #333;
				font-size: 14px;
				-webkit-outline: none;
				-moz-outline: none;
				-ms-outline: none;
				outline: none;
				text-indent: 32px;
				line-height: 38px;
				background: #fff;
				-webkit-transition: 0.2s all;
				-ms-transition: 0.2s all;
				transition: 0.2s all;
				border-bottom: 1px solid #ccc;
			}
			.login .form li input:focus {
				border-color: #ff9415;
			}
			.login .form li i {
				left: 2px;
				top: 8px;
				z-index: 9;
				color: #b7b5b5;
				font-size: 22px;
				position: absolute;
			}
			.login .form li button {
				width: 100%;
				height: 55px;
				color: #fff;
				font-size: 20px;
				cursor: pointer;
				-webkit-outline: none;
				-ms-outline: none;
				outline: none;
				border: none;
				user-select: none;
				line-height: 55px;
				text-align: center;
				border-radius: 4px;
				background: -webkit-linear-gradient(
					90deg,
					rgba(255, 148, 21, 1) 0%,
					rgba(255, 114, 0, 1) 100%
				);
				background: -ms-linear-gradient(90deg, rgba(255, 148, 21, 1) 0%, rgba(255, 114, 0, 1) 100%);
				background: linear-gradient(90deg, rgba(255, 148, 21, 1) 0%, rgba(255, 114, 0, 1) 100%);
			}
			.login .form .operate {
				font-size: 18px;
				overflow: hidden;
				margin: 0 0 100px;
			}
			.login .operate .left {
				float: left;
				color: #333;
				user-select: none;
			}
			.login .operate .right {
				float: right;
			}
			.login .operate a {
				color: #ff7905;
				text-decoration: none;
			}
			.login .operate .checkbox {
				outline: none;
				margin: 2px 8px 0 0;
				white-space: nowrap;
				display: inline-block;
				line-height: 1;
				position: relative;
				vertical-align: middle;
			}
			.login .operate label {
				cursor: pointer;
				display: inline-block;
				vertical-align: middle;
			}
			.login .operate .checkbox_inner {
				display: inline-block;
				position: relative;
				border: 1px solid #dcdfe6;
				border-radius: 2px;
				box-sizing: border-box;
				width: 18px;
				height: 18px;
				background-color: #fff;
				z-index: 1;
				transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
					background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
			}
			.login .operate .checkbox_inner.active {
				background-color: #ff7905;
				border-color: #ff7905;
			}
			.login .operate .checkbox_inner:after {
				content: '';
				box-sizing: content-box;
				border: 1px solid #fff;
				border-left: 0;
				border-top: 0;
				height: 10px;
				left: 4px;
				position: absolute;
				top: 1px;
				transform: rotate(45deg) scaleY(0);
				width: 6px;
				transition: transform 0.15s ease-in 0.05s;
				transform-origin: center;
			}
			.login .operate .checkbox_inner.active:after {
				transform: rotate(45deg) scaleY(1);
			}
			.login .operate .checkbox input {
				left: 0;
				top: 0;
				margin: 0;
				opacity: 0;
				width: 100%;
				height: 100%;
				z-index: 999;
				cursor: pointer;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="login">
			<div class="title">商户平台-管理登录</div>
			<div class="form">
				<ul>
					<li>
						<i class="iconfont icon-user"></i>
						<input type="text" class="username" placeholder="账号/用户名" />
					</li>
					<li>
						<i class="iconfont icon-passwd"></i>
						<input type="password" class="password" placeholder="请输入密码" />
					</li>
					<li class="submit">
						<button type="submit">登录</button>
					</li>
					<li class="operate">
						<div class="left">
							<span class="checkbox">
								<span class="checkbox_inner"></span>
								<input type="checkbox" id="remember" checked value="" />
							</span>
							<label for="remember">记住密码</label>
						</div>
						<div class="right">
							<a href="#">忘记密码</a>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<script src="images/js/jquery.min.js"></script>
		<script src="images/js/admin.min.js"></script>
		<script>
			if ($('#remember').is(':checked')) {
				$('.checkbox_inner').addClass('active')
			} else {
				$('.checkbox_inner').removeClass('active')
			}
			$('#remember').click(function () {
				if ($(this).is(':checked')) {
					$('.checkbox_inner').addClass('active')
				} else {
					$('.checkbox_inner').removeClass('active')
				}
			})

			$('.submit button').on('click', function () {
				submit()
			})

			// 回车键登录
			$(document).keyup(function (event) {
				if (event.keyCode == 13) {
					submit()
				}
			})

			function submit() {
				var base = new Base()
				var username = $('.username').val()
				var password = $('.password').val()
				if (!username || username.length > 32) {
					$(this).message({
						type: 'error',
						msg: '用户名不能为空或大于32位'
					})
					return
				}
				if (!password) {
					$(this).message({
						type: 'error',
						msg: '对不起，密码不能为空！'
					})
					return
				} else if (password.length < 6 || password.length > 32) {
					$(this).message({
						type: 'error',
						msg: '对不起，密码不能小于6位或大于32位'
					})
					return
				}

				base.ajax({
					successMsg: '提交成功！',
					errorMsg: '提交失败！',
					url: 'upload.php',
					// refresh: true,
					link: 'https://www.baidu.com',
					data: {
						username,
						password
					},
					error(res) {
						console.log(res)
					},
					success(res) {
						console.log(res)
					}
				})
			}
		</script>
	</body>
</html>
